﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <#include file=include.html />
	<title>WebMVC</title>
</head>

<body style="background-color: #F2F2F2">


    <form class="layui-form">
        <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="bitian">*</span>头像</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
        <a href="__APP__/Show">ddd</a>

    </form>
	<script>
		
layui.use(['form','upload'], function() {
	var form=layui.form;
    var upload = layui.upload;
    upload.render({
        elem: '#test3'
        , url: 'upimage'
        , accept: 'file' //普通文件
        , done: function (res) {
            console.log(res)
        }
    });
	var uploadInst = upload.render({
		elem: '#test1'
		,url: 'upimage'
		,before: function(obj){
		  //预读本地文件示例，不支持ie8
		  obj.preview(function(index, file, result){
			$('#demo1').attr('src', result); //图片链接（base64）
		  });
		}
		,done: function(res){
		  //如果上传失败
		  if(res.code != 0){
			return layer.msg('上传失败');
		  }
		  //上传成功
		}
		,error: function(){
		  //演示失败状态，并实现重传
		  var demoText = $('#demoText');
		  demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		  demoText.find('.demo-reload').on('click', function(){
			uploadInst.upload();
		  });
		}
	  });	
	  form.render();
});
	</script>
</body>


</html>